import { Component, OnInit, Input, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, OnDestroy, Output } from '@angular/core';
import { DragDrop } from '@angular/cdk/drag-drop';

import { LayerService, MapService} from '../../core';

@Component({
  selector: 'app-drag-detial-panel',
  templateUrl: './drag-detial-panel.component.html',
  styleUrls: ['./drag-detial-panel.component.scss']
})
export class DragDetialPanelComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
  effect = 'scrollx';
  canvisible = false;
  dotPosition = 'top';
  mapboxglmap = null;
  @Input() data = null;
  subscription = [];

  constructor(private dragDrop: DragDrop,
              private apboxMapService: MapService,
              private layerOperaService: LayerService) { }
  ngOnInit() {
    // 关闭详情面板
    this.subscription.push(
      postal.channel('DETAIL_PANEL_CHANNEL').subscribe('detail-panel', res => {
        this.closeDetail();
    }));
    setTimeout(() => {
      const dom = document.getElementById('detail');
      const dragModal = this.dragDrop.createDrag(dom);
      const title = document.getElementById('detail-header');
      // 设置句柄为title，即仅头部可拖动，避免内容中鼠标无法选中的情况
      dragModal.withHandles([title]);
      // 限制拖拽区域在body中，防止溢出
      const domRouter = document.getElementById('contentRouter');
      dragModal.withBoundaryElement(domRouter);
    }, 0);
  }

  ngAfterViewInit() {
    setTimeout(() => {
      const dom = document.getElementById('detail');
      const dragModal = this.dragDrop.createDrag(dom);
      const title = document.getElementById('detail-header');
      // 设置句柄为title，即仅头部可拖动，避免内容中鼠标无法选中的情况
      dragModal.withHandles([title]);
      // 限制拖拽区域在body中，防止溢出
      const domRouter = document.getElementById('contentRouter');
      dragModal.withBoundaryElement(domRouter);
     }, 0);
  }

  getKey(item) {
    return Object.keys(item);
  }

  // 移动到该位置
  moveToPos(e) {
    // 移除所有高亮
    this.removeLayers(true);
    this.layerOperaService.removeIQueryLayer();
    this.layerOperaService.addLayerByType(e);
  }
  removeLayers(e) {
    // 清空上次绘制的circle（也就是那个高亮的图层）
    const layers = ['highlightPointID', 'highlightLineID', 'lightLinetyleID'];
    this.apboxMapService.removeLayerByIds(layers);
    this.layerOperaService.removeIQueryLayer();
  }
  closeDetail() {
    this.canvisible = false;
    // this.visible.emit(false);
    this.removeLayers(false);
    // this.el.nativeElement.querySelector('#detail').style.display = 'none';
  }

  orderArray(data){
    // 需求：点在前面，线在后面展示
    const pointArray = [];
    const lineArray = [];
    data.forEach(element => {
      const len = element.itemData.title.length;
      if((element.itemData.title).charAt(len - 1) === '点'){
        pointArray.push(element);
      }else{
        lineArray.push(element);
      }
    });
    return _.concat(pointArray, lineArray);
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.data && changes.data.currentValue) {
      this.canvisible = true;
      // 执行排序操作！
      this.data = this.orderArray(changes.data.currentValue);
    }
    setTimeout(() => {
      const dom = document.getElementById('detail');
      const dragModal = this.dragDrop.createDrag(dom);
      const title = document.getElementById('detail-header');
      // 设置句柄为title，即仅头部可拖动，避免内容中鼠标无法选中的情况
      dragModal.withHandles([title]);
      // 限制拖拽区域在body中，防止溢出
      const domRouter = document.getElementById('contentRouter');
      dragModal.withBoundaryElement(domRouter);
     }, 0);
  }
  ngOnDestroy(){
    this.subscription.forEach(element => {
      element.unsubscribe();
    });
  }

}
